<template>
	<!-- 	<view class="waterfall">
		<uv-waterfall ref="waterfall" v-model="a" :add-time="10" :left-gap="leftGap" :right-gap="rightGap"
			:column-gap="columnGap" @changeList="changeList">
			<template v-slot:list1>
				<view>
					<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item">
						<view class="waterfall-item__image">
							<image :src="baseurl+'/'+ item.files[0]" mode="widthFix" :style="{width:item.width+'px'}">
							</image>
						</view>
						<view class="waterfall-item__ft">
							<view class="waterfall-item__ft__title">
								<text class="value">{{item.title}}</text>
							</view>
							<view class="waterfall-item__ft__desc uv-line-2">
								<text class="value">{{item.desc}}</text>
							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-slot:list2>
				<view>
					<view v-for="(item, index) in list2" :key="item.id" class="waterfall-item">
						<view class="waterfall-item__image">
							<image :src="baseurl+'/'+ item.files[0]" mode="widthFix" :style="{width:item.width+'px'}">
							</image>
						</view>
						<view class="waterfall-item__ft">
							<view class="waterfall-item__ft__title">
								<text class="value">{{item.title}}</text>
							</view>
							<view class="waterfall-item__ft__desc uv-line-2">
								<text class="value">{{item.desc}}</text>
							</view>
						</view>
					</view>
				</view>
			</template>
		</uv-waterfall>
	</view> -->
	<view class="Index">
		<view class="pubuBox">
			<view class="pubuItem">
				<view class="item" v-for="(item, index) in initialList" :key="item.id"
					@click="taskDetail(item.id,index)">
					<view>
						<view class="flow-img">
							<image v-if="checkMediaType(item.files[0])=='image'" :src="baseurl+item.files[0]"
								style="width: 100%;border-radius: 10rpx;" mode="widthFix" lazy-load></image>
							<video :src="baseurl+item.files[0]" :controls="false" :show-center-play-btn="false"
								style="width: 100%;border-radius: 10rpx;" v-else></video>
							<view class="push-time" v-if="item.minute<60&&item.minute>0">
								{{item.minute}}分钟前发布
							</view>
							<view class="push-time" v-if="item.hour<24&&item.hour>0">
								{{item.hour}}小时前发布
							</view>
							<view class="push-time" v-if="item.hour>=24&&item.hour>0">
								{{item.day}}天前发布
							</view>
							<view class="push-time" v-if="item.hour==0&&item.minute==0&&item.day==0">
								刚刚发布
							</view>
							<view class="apply-item">
								<image src="@/static/images/no_apply.png" mode="aspectFill"></image>
								<view class="apply-num">
									{{item.claim_count}}
								</view>
							</view>
							<view class="task-status" v-if="isReleasePage==true&&item.status==1">
								<text class="status-title">已下架</text>
							</view>
							<!-- <view
								style="position: absolute;top:0;right:0;background: #fff;border-bottom-left-radius: 6rpx;"
								v-if="isApplyList==true">
								<view style="display: flex;lign-items: center;"
									@click.stop="bindDelte(item.id,item.user_task_claim_id,index)">
									<uv-icon name="trash" color="#ff0000" size="44rpx"></uv-icon>
								</view>
							</view> -->
						</view>

						<view class="info" style="margin:12rpx 0 ;">
							<text class="task-type">
								{{item.type_text}}
							</text>
							<text class="task-title">
								{{item.title}}
							</text>
						</view>
						<view class="" v-if="type=='usermark'">
							<view class="task-address">
								<view class="" style="display: flex;margin:15rpx 0 ;" v-if="item.userinfo">
									<view class="task-address_avatar">
										<image :src="baseImgurl+'/'+item.userinfo.avatar" mode=""></image>
									</view>
									<view style="display: flex;width: 275rpx;justify-content:space-between;">
										<view class="text-clamp " style="font-size: 26rpx;">{{item.userinfo.username}}
										</view>
										<view style="font-size: 24rpx;color: #FE3052;">
											{{item.distance}}
										</view>
									</view>

								</view>
							</view>
							<view class="footer-btn" v-if="item.user_task_claim_status">
								<!-- <view class="edit-btn" v-if="item.user_task_claim_status==0"
									@click.stop="bindClick(item.user_task_claim_id)">
									申领
								</view>
								<view class="edit-btn" v-if="item.user_task_claim_status==1">
									已申领
								</view> -->

								<view class="cancel-btn" @click.stop="bindDelte(item.id,item.user_task_claim_id,index)">
									删除
								</view>

							</view>
						</view>
						<view class="task-address" v-if="type=='usermark'">
							<view class="" style="display: flex;" v-if="item.user_info">
								<view class="task-address_avatar">
									<image :src="baseImgurl+'/'+item.user_info.avatar" mode=""></image>
								</view>
								<view style="display: flex;width: 275rpx;justify-content:space-between;">
									<view class="text-clamp " style="font-size: 26rpx;">{{item.user_info.username}}
									</view>
									<view style="font-size: 24rpx;color: #FE3052;">
										{{item.distance}}
									</view>
								</view>
							</view>
							<view class="edit-btn" v-if="isReleasePage==true" @click.stop="toEdit(item.id)">
								<image src="@/static/images/red_edit.png" mode="aspectFill"></image>
							</view>
						</view>
						<view class="task-address" v-else>
							<view class="task-address-edit">
								<view style="width: 22rpx;height: 22rpx;">
									<image src="@/static/images/chat_address.png" mode="aspectFill"></image>
								</view>
								<view class="distance">
									<view class="">
										{{item.address}} | {{item.distance}}
									</view>
								</view>
							</view>
							<!-- 	<view class="edit-btn" v-if="isReleasePage==true" @click.stop="toEdit(item.id)">
								编辑
								
							</view> -->
							<view class="footer-btn">

								<view class="blue-btn" v-if="item.status_text=='上架'" @click.stop="cleartask(item.id)">
									刷新
								</view>
								<view v-else class="cancel-btn" @click.stop="binduserDelte(item.id)">
									删除
								</view>
								<view class="edit-btn" @click.stop="toEdit(item.id)">
									编辑
								</view>
							</view>
						</view>

					</view>

				</view>
			</view>
		</view>
	</view>
	<!-- 下架 -->
	<uv-popup ref="dropRef" mode="center" :round="15" :closeOnClickOverlay="false" :safeAreaInsetBottom="false">
		<view class="register-popup" style="width: 630rpx;">
			<view class="register-title">
				<view class="title">
					提示
				</view>
			</view>
			<view class="tips" style="padding: 100rpx 0 20rpx 0; ">
				是否下架该任务？
			</view>
			<view class="footer-btn">
				<view class="cancel" @click="dropRef.close()">
					取消
				</view>
				<view class="confirm" @click="dropTask">
					下架
				</view>
			</view>
		</view>
	</uv-popup>
</template>

<script setup>
	import {
		guid
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref,
		computed,
		watch,
		onMounted
	} from 'vue';
	import {
		UserDeleteClaimTask,
		UserClaimTask
	} from "../api/active.js"
	import {
		useActiveStore
	} from "@/store/modules/active.js"
	import {
		throttle,
	} from '../utils/utils';
	import {
		deleteTask
	} from '@/api/user.js'
	const emit = defineEmits(['updateList','getnewDate'])
	const baseImgurl = ref('')
	const dropRef = ref()
	const taskId = ref()
	const activeStore = useActiveStore()
	// const list = ref([])
	// const list1 = reactive([])
	// const list2 = reactive([])
	// const leftGap = ref(10)
	// const rightGap = ref(10)
	// const columnGap = ref(10)
	// const a = ref([])
	onMounted(() => {
		baseImgurl.value = uni.getStorageSync('baseUrl')
	})
	const binduserDelte = (id) => {

		uni.showModal({
			title: '提示',
			content: '是否确认删除任务?',
			success: function(res) {
				if (res.confirm) {
					console.log('用户点击确定');
					getDelte(id)
				} else if (res.cancel) {
					uni.showToast({
						title: '取消删除',
						icon: 'none'
					})
					console.log('用户点击取消');
				}
			}
		});
	}
	const getDelte = (id) => {
		deleteTask({
			user_task_id: id
		}).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: '删除成功',
					icon: 'none'
				})
				setTimeout(()=>{
					emit('getnewDate', id)
				},2000)
			}
		})
	}
	const props = defineProps({
		list: {
			type: Array,
			default: () => []
		},
		baseurl: {
			type: String,
			default: () => uni.getStorageSync('baseUrl')
		},
		// 是否是我的发布页面
		isReleasePage: {
			type: Boolean,
			default: () => false

		},
		// 报名页
		isApplyList: {
			type: Boolean,
			default: () => false

		},
		type: {
			type: String,
			default: () => ''
		}
	})
	// 使用 ref 创建一个响应式的 initialList
	const initialList = ref([]);

	// 监听 props.list 的变化，更新 initialList
	watch(
		() => props.list,
		(newList) => {
			initialList.value = [...newList]; // 更新 initialList
		}, {
			immediate: true
		} // 立即执行，初始化时也会更新
	);
	const cleartask = (id) => {
		console.log(33, id);
		emit('updateList', id)
		// taskId.value=id
		// dropRef.value.open()
	}
	// 下架任务
	const dropTask = throttle(async () => {
		let res = await activeStore.updateTaskStatus({
			user_task_id: taskId.value,
			status: '1'
		})
		if (res.code == 200) {
			uni.$uv.toast('下架成功')
			dropRef.value.close()
			emit('updateList')
		}
	}, 200)
	// 申领任务
	const bindClick = (id) => {
		uni.showModal({
			title: '提示',
			content: '确定申领此任务?',
			success: function(res) {
				if (res.confirm) {

					UserClaimTask({
						user_task_id: id
					}).then(res => {
						if (res.code == 200) {
							uni.$uv.toast('申领成功')

						}
					})

				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});


	}
	// 判断数组中是图片还是视频
	const checkMediaType = (url) => {
		// 获取路径的最后一个点之后的内容作为文件扩展名
		var extension = url.split('.').pop().toLowerCase();
		// 声明支持的图片和视频文件扩展名
		var imageExtensions = ['jpg', 'jpeg', 'gif', 'png', 'ico'];
		var videoExtensions = ['mp4', 'wmv', 'avi', 'mov'];
		// 判断文件扩展名是否在图片扩展名数组中
		if (imageExtensions.includes(extension)) {
			return 'image';
		}
		// 判断文件扩展名是否在视频扩展名数组中
		if (videoExtensions.includes(extension)) {
			return 'video';
		}
		// 扩展名不在图片或视频数组中，返回null表示无法确定媒体类型
		return null;
	}
	// watch(() => props.list, (newval, old) => {
	// 	a.value = props.list
	// })

	const taskDetail = (taskId, index) => {
		uni.navigateTo({
			url: `/pages/release/taskdetail/index?taskId=${taskId}&taskIndex=${index}`
		})
	}
	const toEdit = (id) => {
		uni.navigateTo({
			url: '/pages/release/findtask/index?id=' + id
		})
	}
	// 我的报名
	const bindDelte = (id, taskid, index) => {
		uni.showModal({
			title: '提示',
			content: '删除后无法恢复,是否确认?',
			success: function(res) {
				if (res.confirm) {
					DelteApi(id, taskid, index)
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

	}
	const DelteApi = (id, taskid, index) => {
		UserDeleteClaimTask({
			user_task_id: id,
			user_task_claim_id: taskid
		}).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: '删除成功',
					icon: 'none'
				})
				initialList.value.splice(index, 1)
			}
		})
	}
</script>
<style lang="scss" scoped>
	$show-lines: 1;
	@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';

	.waterfall-item {
		overflow: hidden;
		margin-top: 10px;
		border-radius: 6px;
	}

	.waterfall-item__ft {
		padding: 20rpx;
		background: #fff;

		&__title {
			margin-bottom: 10rpx;
			line-height: 48rpx;
			font-weight: 700;

			.value {
				font-size: 32rpx;
				color: #303133;
			}
		}

		&__desc .value {
			font-size: 28rpx;
			color: #606266;
		}

		&__btn {
			padding: 10px 0;
		}
	}

	// 列表
	.item {
		break-inside: avoid;

		/* 避免内容分割到不同列 */
		.flow-img {
			position: relative;

			.push-time {
				position: absolute;
				bottom: 16rpx;
				right: 12rpx;
				text-align: center;
				width: 156rpx;
				height: 40rpx;
				line-height: 40rpx;
				font-weight: 400;
				font-size: 20rpx;
				color: #FFFFFF;
				background: #000000;
				border-radius: 22rpx 22rpx 22rpx 22rpx;
				background-color: rgb(46, 49, 35, 0.6);
			}

			.apply-item {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 0;
				left: 0;
				padding: 0 20rpx;
				height: 48rpx;
				background-color: rgb(46, 49, 35, 0.6);
				border-radius: 10rpx 0rpx 10rpx 0rpx;

				image {
					width: 28rpx;
					height: 28rpx;
				}

				.apply-num {
					padding-left: 8rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}

			.task-status {
				position: absolute;
				top: 0;
				right: 0;
				padding: 0 20rpx;
				// height: 48rpx;
				background-color: rgb(46, 49, 35, 0.6);
				border-radius: 0rpx 20rpx 0rpx 20rpx;

				.status-title {
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}

		.info {
			padding: 0 10rpx;

			.task-type {
				padding: 5rpx 10rpx;
				background: #E8F1FF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #2072FF;
			}

			.task-title {
				margin-left: 12rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #222222;
				word-break: break-all
			}
		}

		.task-address {

			margin: 0 0 20rpx 0;

			.task-address-edit {
				display: flex;
				align-items: flex-start;
				margin-bottom: 15rpx;
			}

			// padding: 0 10rpx;
			image {
				width: 34rpx;
				height: 34rpx;
			}

			.task-address_avatar {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 14rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.distance {
				flex: 1;
				display: flex;
				align-items: flex-start;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				padding-left: 8rpx;
			}

			// .edit-btn {
			// 	width: 80rpx;
			// 	height: 40rpx;
			// 	line-height: 40rpx;
			// 	border-radius: 50rpx 50rpx 50rpx 50rpx;
			// 	text-align: center;
			// 	font-weight: 500;
			// 	font-size: 28rpx;
			// 	background-color:  #FE3052 ;
			// 	color: #fff;
			// }
		}
	}

	//瀑布流
	page {
		background-color: #eee;
		// height: 100%;
	}

	// .pubuBox {
	// 	// padding: 22rpx;
	// }

	.pubuItem {
		column-count: 2;
		column-gap: 20rpx;
	}

	// .Index {
	// 	width: 100%;
	// 	height: 100%;
	// }
	.text-clamp {
		display: -webkit-box;
		/* 使用弹性盒模型 */
		-webkit-box-orient: vertical;
		/* 垂直排列 */
		-webkit-line-clamp: 1;
		/* 限制为 2 行 */
		overflow: hidden;
		/* 超出部分隐藏 */
		text-overflow: ellipsis;
		line-height: 1;
		/* 超出部分用省略号表示 */
	}

	.footer-btn {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.cancel-btn {
			width: 140rpx;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 50rpx;
			border: 2rpx solid #FE3052;
			text-align: center;
			font-weight: 500;
			font-size: 28rpx;
			color: #FE3052;
		}

		.blue-btn {
			width: 160rpx;
			height: 58rpx;
			line-height: 58rpx;
			border-radius: 50rpx;
			border: 2rpx solid #1984FF;
			text-align: center;
			font-weight: 500;
			font-size: 28rpx;
			color: #1984FF;
		}

		.edit-btn {
			width: 160rpx;
			height: 58rpx;
			line-height: 58rpx;
			border-radius: 50rpx;
			border: 2rpx solid #111111;
			text-align: center;
			font-weight: 500;
			font-size: 28rpx;
			color: #222222;
		}
	}

	.register-popup {
		padding: 30rpx;

		.register-title {
			display: flex;
			align-items: center;
			justify-content: center;

			.title {
				flex: 1;
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
				text-align: center;
			}
		}

		.tips {
			padding: 100rpx 0;
			text-align: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #333;
		}

		.tips1 {
			text-align: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
		}

		.footer-btn {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 100rpx;
			font-weight: bold;
			font-size: 28rpx;
			line-height: 88rpx;
			text-align: center;

			.cancel {
				width: 260rpx;
				height: 88rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				background: #F6F6F6;
				color: #666666;
			}

			.confirm {
				width: 260rpx;
				height: 88rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				background: #FE3052;
				color: #fff;
			}
		}
	}
</style>